<template>
    <div class="item" v-for="i in moviesList['subjects']">
        <div>
            <img :src="i['images']['medium']" />
        </div>
        <div>
            <h3>{{i['title']}}</h3>
            <p>****</p>
            <p>导演：{{i['directors'][0]['name']}}</p>
            <p>主演：<span v-for="actor in i['casts']">{{actor['name']}}&nbsp;</span></p>
        </div>
        <div>
            <mt-button  plain size="small" type="primary">购票</mt-button>
        </div>
    </div>
</template>
<style>
    .item{display: -webkit-box;padding: 15px 15px;}
    .item>div:nth-child(2){
        display:-webkit-box;
        -webkit-box-orient: vertical;/*让box内元素数值排列*/
        -webkit-box-flex: 1;
        -webkit-box-pack: center;
        margin-left: 15px;
    }
    .item>div:nth-child(2) h3{padding: 5px 0;}
    .item>div:nth-child(2) p:nth-child(2){padding: 0 0 5px;}

    .item>div:nth-child(3){
        display: -webkit-box;
        -webkit-box-pack:end;
        -webkit-box-align: center;
    }
</style>
<script>
    import { Button,Toast } from 'mint-ui'
    export default{
        data(){
            return {
                apiUrl: 'https://api.douban.com/v2/movie/in_theaters',
                moviesList: {}
            }
        },
        components: {
            Button
        },
        compiled: function(){
            var t = this;
            this.$http.jsonp(this.apiUrl).then(function(res){console.log(res.body);t.$set('moviesList',res.body)})
            console.log('created')
        },
        methods: {

        },
        computed:{

        }
    }
</script>